<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input表单元素</title>
</head>
<body>
<!--
    input表单元素是通过input标签中type属性的值的不同,生成不同的表单元素

    type常见值
    text:单行文本框
    password:密码框
    radio:单选框
        同一组单选框同一时间只能选择其中一个选项
        不同组的单选框随便选
        通过name属性进行分组,name属性值相同的元素属于同一组
    checkbox:多选框
    file:文件选择器
    hidden:隐藏域
        在页面中看不到,但是表单提交时,隐藏域的数据也会提交
    submit:提交按钮,点击该按钮时表单提交,提交到action属性所指向的URL地址
    reset:重置按钮,点击该按钮后表单恢复到初始状态
    button:普通按钮,点击之后什么都不会发生。可以通过js赋予其对应功能
    image:图片按钮,效果相当于提交按妞,只是使用一张图片代替原来的提交按钮
        该元素需要通过src属性指定图片位置

    input标签常用属性
    name:在表单提交之后,会将带有name属性的所有表单元素的值带入到请求中
        后端开发人员会根据表单name属性值进行数据的查找
        请求参数的格式为:key=value
        其中key即为name属性值,value为表单元素具体的内容
    value:对于输入框而言,是为指定的表单元素设置默认值
        对于单选框、多选框、下拉列而言,是为指定选项设置服务器值
        服务器值:传输到服务器上时显示的数据
    readonly:只读属性,该元素无法编辑
    disabled:将当前元素设置为无效,此时也无法编辑
        表单在进行数据传输时无视所有无效的表单元素
    size:定义输入框的长度
    maxlength:最大字符数
    minlength:最小字符数
    checked:为单选框或者多选框设置默认选中状态
    accept:用于显示文件选择器中可以选择的文件类型
        纯文本
            text/plain:普通文本
            text/html:html文本
            text/css:css文本
            text/*:所有文本
        图片
            image/jpeg
            image/png
            image/gif
            image/*
    placeholder:提示文字,当输入框中没有内容是显示的提示信息
    required:是否属于必填项
-->

<form action="#">
    <input type="hidden" name="id" value="10" readonly>
    账号:<input type="text" name="username" size="10" maxlength="10" minlength="5" placeholder="请输入账号" required><br>
    密码:<input type="password" name="password" value="123" disabled size="20"><br>
    性别:
    <input type="radio" name="gender" value="man" >男
    <input type="radio" name="gender" value="woman" checked>女<br>
    兴趣:
    <input type="checkbox" name="hobbies" value="eat" checked>吃饭
    <input type="checkbox" name="hobbies" value="sleep">睡觉
    <input type="checkbox" name="hobbies" value="beat" checked>打豆豆<br/>
    文件:<input type="file" name="file" accept="image/*"><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通">
    <input type="image" src="../images/submit.gif">
</form>
</body>
</html>